<template>
  <el-dialog :visible.sync="dialogVisible" title="结算登记" width="80%" :before-close="clear">
    <p class="common-title"><span class="titleName">合同信息</span></p>
    <vxe-form :data="form" title-align="right" class-name="anthorContent-item">
      <vxe-form-item title="合同编码" field="contractNumber" :item-render="{}" span="8">
        <template #default="{ data }">
          <vxe-input v-model="data.contractNumber" class="normal" placeholder="合同编码" disabled></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="合同名称" field="contractName" :item-render="{}" span="8">
        <template #default="{ data }">
          <vxe-input v-model="data.contractName" class="normal" placeholder="合同名称" disabled></vxe-input>
        </template>
      </vxe-form-item>
    </vxe-form>
    <p class="common-title"><span class="titleName">本次结算登记</span></p>
    <div class="title-operation anthorContent-item">
      <el-button type="primary" size="small" @click="insertEvent(-1)">新增</el-button>
    </div>
    <div class="anthorContent-item">
      <CommonTable ref="settleTable" :columns="columns" :tableData="tableData" isEdit />
    </div>

    <p class="common-title"><span class="titleName">历史结算登记</span></p>
    <div class="anthorContent-item">
      <CommonTable ref="settleRecord" :columns="tableColumn" :tableData="records" />
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import VXETable from 'vxe-table';
import CommonTable from './common.vue';
export default {
  components: { CommonTable },
  data() {
    return {
      dialogVisible: false,
      form: {
        contractId: '',
        contractNumber: '',
        contractName: '',
      },
      columns: [
        {
          type: 'seq',
          width: 60,
          title: '序号',
        },
        {
          field: 'settleAmount',
          title: '收款金额',
          editRender: {},
          slots: {
            default: 'd_settleAmount',
            edit: 'e_settleAmount',
          },
        },
        {
          field: 'settleName',
          title: '收款人',
          editRender: {},
          slots: {
            default: 'd_settleName',
            edit: 'e_settleName',
          },
        },
        {
          field: 'settleTime',
          title: '收款时间',
          editRender: {},
          slots: {
            default: 'd_settleTime',
            edit: 'e_settleTime',
          },
        },
        {
          field: 'remarks',
          title: '备注',
          editRender: {},
          slots: {
            default: 'd_remarks',
            edit: 'e_remarks',
          },
        },
        {
          field: 'operation',
          title: '操作',
          editRender: {},
          slots: { default: 'operation' },
        },
      ],
      tableColumn: [
        {
          type: 'seq',
          width: 60,
          title: '序号',
        },
        {
          field: 'settleAmount',
          title: '收款金额',
          editRender: {},
          slots: {
            default: 'd_settleAmount',
          },
        },
        {
          field: 'settleName',
          title: '收款人',
          editRender: {},
          slots: {
            default: 'd_settleName',
          },
        },
        {
          field: 'settleTime',
          title: '收款时间',
          editRender: {},
          slots: {
            default: 'd_settleTime',
          },
        },
        {
          field: 'remarks',
          title: '备注',
          editRender: {},
          slots: {
            default: 'd_remarks',
          },
        },
      ],
      tableData: [],
      records: [],
    };
  },
  computed: {
    selRowids() {
      return this.value.map((item) => item.id?.toString());
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getSettleRecord();
      }
    },
  },
  mounted() {},
  methods: {
    search() {
      this.form.page = 1;
      this.$emit('search', this.form);
    },
    reset() {
      this.resetPage();
      this.$emit('search', this.form);
    },
    clear() {
      this.dialogVisible = false;
      this.tableData = [];
    },
    async insertEvent(row) {
      const $table = this.$refs.settleTable.$refs.table;
      const userInfo = JSON.parse(localStorage.getItem('userInfo')) 
      // console.log(userInfo);
      const record = {
        contractId: this.form.contractId,
        settleAmount: '',
        settleName: userInfo.userName,
        settleTime: new Date(),
        remarks: null,
      };
      const { row: newRow } = await $table.insertAt(record, row);
      await $table.setActiveCell(newRow);
    },
    getSettleRecord() {
      this.$api.getSettleRecord({ contractId: this.form.contractId }).then((res) => {
        this.records = res.data;
      });
    },
    save() {
      const $table = this.$refs.settleTable.$refs.table;
      const { afterTreeFullData } = $table.$refs.xTable;
      this.$api.addSettleRecordList({ addSettleRecordCmdList: afterTreeFullData }).then((res) => {
        VXETable.modal.message({
          content: '新增成功',
          status: 'success',
        });
        this.clear();
        this.$emit('reload');
      });
    },
    change({ type, currentPage, pageSize }) {
      this.form.page = currentPage;
      this.form.size = pageSize;
      this.$emit('pager', this.form);
    },
    // 重置参数
    resetPage() {
      this.form = {
        employeeName: '',
        idCard: '',
        page: 1,
        size: 10,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .table-normal .vxe-body--row .vxe-body--column {
    height: 40px !important;
  }
}
</style>
